<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="down-container">
        <el-table
          :data="tableData"
          header-cell-class-name="table_header"
          stripe
          :border="true"
        >
          <el-table-column label="预警等级" align="center" prop="level">
          </el-table-column>
          <el-table-column label="预警类型" prop="label"> </el-table-column>
          <el-table-column label="状态">
            <template #default="{ row }">
              <el-button
                v-if="row.status === 0"
                link
                type="primary"
                @click="pushAlert(row.value, 1)"
                >推送</el-button
              >
              <el-button
                v-else
                link
                type="danger"
                @click="pushAlert('guanbi', 0)"
                >关闭</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          style="margin-top: 10px"
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getAlarmList"
        />
      </div>
    </div>
  </div>
</template>
<script setup name="alertPush">
import { ref, onMounted } from "vue";
import { pushAlertApi } from "@/api/alertPush/alertPush";

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);
const arr1 = [
  {
    level: "一级预警",
    label: "民航冲突预警",
    value: "MINHANG",
    status: 0,
  },
  {
    level: "一级预警",
    label: "侵入管制空域预警",
    value: "QINRU",
    status: 0,
  },
  {
    level: "一级预警",
    label: "行业级-消费级航线冲突",
    value: "Conflict",
    status: 0,
  },
  {
    level: "一级预警",
    label: "行业级-行业级航线冲突",
    value: "Conflict2",
    status: 0,
  },
  {
    level: "一级预警",
    label: "热气球预警演示",
    value: "REQIQIU",
    status: 0,
  },
  {
    level: "一级预警",
    label: "直升机预警演示",
    value: "ZHISHENGJI",
    status: 0,
  },
  {
    level: "一级预警",
    label: "飞艇预警演示",
    value: "FEITING",
    status: 0,
  },
  {
    level: "一级预警",
    label: "航模预警演示",
    value: "HANGMO",
    status: 0,
  },
  {
    level: "二级预警",
    label: "偏离航线预警",
    value: "Invasion",
    status: 0,
  },
  {
    level: "二级预警",
    label: "偏离空域预警",
    value: "Pianli",
    status: 0,
  },
  {
    level: "二级预警",
    label: "无线电干扰预警",
    value: "CounterWarning",
    status: 0,
  },
  {
    level: "二级预警",
    label: "电磁紊乱预警",
    value: "Interfere",
    status: 0,
  },
  {
    level: "二级预警",
    label: "风力风速异常预警",
    value: "WindSpeed",
    status: 0,
  },
  {
    level: "二级预警",
    label: "降雨降雪预警",
    value: "QIXIANG",
    status: 0,
  },
  {
    level: "三级预警",
    label: "限高预警",
    value: "HeightLimit",
    status: 0,
  },
  {
    level: "三级预警",
    label: "途径热门飞行区域预警",
    value: "PopularAreas",
    status: 0,
  },
  {
    level: "三级预警",
    label: "途径事故多发区域预警",
    value: "CrashPoint",
    status: 0,
  },
  {
    level: "多发预警",
    label: "多发预警演示",
    value: "DUOFA",
    status: 0,
  },
];
let tableData = ref([]);
const getAlarmList = () => {
  let start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize;
  let end = queryParams.value.pageNum * queryParams.value.pageSize;
  tableData.value = arr1.slice(start, end);
  total.value = arr1.length;
};

const pushAlert = async (type, status) => {
  if (type !== "guanbi") {
    await pushAlertApi({ type: "guanbi" });
  }
  setTimeout(async () => {
    await pushAlertApi({ type });
  }, 1000);
  tableData.value = tableData.value.map((item) => {
    item.status = 0;
    return item;
  });
  if (status === 0) {
    return;
  }
  let index = tableData.value.findIndex((item) => item.value === type);
  tableData.value[index].status = status;
};

onMounted(() => {
  getAlarmList();
});
</script>
<style lang="scss" scoped>
.airspaceApplication {
  padding: 25px;
  width: 100%;
  height: 100%;

  .container {
    width: 100%;
    height: 100%;
    padding: 30px;
    background: white;

    .down-container {
      background-color: #ffffff;
      border-radius: 4px;
      height: 94%;

      :deep .table_header {
        color: #333333;
        font-size: 16px;
        font-weight: 400;
        font-family: PingFang SC;
      }

      // 表格内背景颜色
      :deep .el-table td {
        border: 0px;
        color: #333333; // 修改字体颜色
        font-size: 14px;
      }

      .tag {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 15px;
        color: rgba(153, 153, 153, 1);
        border: 1px solid rgba(153, 153, 153, 1);
      }
      .tag.warning {
        color: rgba(255, 149, 18, 1);
        border: 1px solid rgba(255, 149, 18, 1);
      }
      .tag.success {
        color: rgba(43, 193, 123, 1);
        border: 1px solid rgba(43, 193, 123, 1);
      }
    }

    :deep .el-table__footer-wrapper,
    .el-table__header-wrapper {
      background-color: #f4f4f4;
      height: 56px;
    }

    :deep .el-table__header {
      height: 100%;
      background-color: #f4f4f4;
    }

    :deep .el-table .el-table__cell {
      text-align: center;
    }

    :deep .el-table__row {
      height: 60px;
    }

    :deep .el-table tr {
      height: 56px;
    }
  }
  .addAlarmVisible {
    width: 559px;
    height: 484px;
    position: relative;
    top: 20%;

    .colorFullBox {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background-color: rgba(43, 193, 123, 0.3);
    }

    .colorLineBox {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      border: 1px #2bc17b solid;
    }

    .createBtn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 26px;
      width: 98px;
      height: 36px;
      font-size: 12px;
      box-sizing: border-box;
      border-radius: 4px;
      color: rgba(43, 193, 123, 1);
      background: rgba(51, 151, 255, 0.03);
      border: 1px solid rgba(43, 193, 123, 1);
      cursor: pointer;
      margin-left: 12px;
      &:hover {
        background: rgba(51, 151, 255, 0.1);
      }
    }

    .title {
      height: 100%;
      background-color: #202741;
      color: #ffffff;
      text-align: left;
      padding: 15px 28px;
      font-size: 18px;
      letter-spacing: 1px;
    }
  }

  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: 36vh !important;
  }

  :deep .el-dialog__body {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
  }

  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: 16vh !important;
  }

  :deep .el-dialog__header {
    padding: 0;
    margin: 0;
    height: 12%;
  }

  :deep .el-textarea__inner {
    height: 100%;
    resize: none;
  }

  :deep .el-dialog__body {
    padding: 25px 30px 5px !important;
  }

  :deep .el-form {
    width: 100%;
  }

  :deep .el-select {
    width: 100%;
  }

  :deep .el-form-item--default .el-form-item__label {
    width: 19%;
    color: #666666;
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    line-height: 1.3;
    margin: 5px 0 -2px 0;
  }
}
</style>
